<script setup>
import {create_friends, list_friends} from "@/apis/v1/friends/friends.js";
import constant from "@/utils/constant.js";
import {ElMessage} from "element-plus";
import proButton from "@/components/common/proButton/proButton.vue";
import PageBack from "@/components/common/pageBack/pageBack.vue";

const friends = ref({
  title: "",
  url: "",
  avatar: "",
  info: "",
  cover: "",
});
const count = ref(0);
const friendList = ref([]);
const clickLetter = () => {
  if (document.body.clientWidth < 700) {
    $(".form-wrap").css({"height": "1000px", "top": "-200px"});
  } else {
    $(".form-wrap").css({"height": "1150px", "top": "-200px"});
  }
};
const submitFriend = () => {
  if (friends.value.title === "" || friends.value.url === "" || friends.value.avatar === ""
      || friends.value.info === "" || friends.value.cover === "") {
    ElMessage.error("信息不能为空");
    return;
  }
  create_friends(friends.value).then(res => {
    if (res.code !== 200) {
      ElMessage.error(res.message);
    } else {
      ElMessage.success(res.message);
      friends.value.title = "";
      friends.value.url = "";
      friends.value.avatar = "";
      friends.value.info = "";
      friends.value.cover = "";
    }
  });
};
const getFriendsList = () => {
  list_friends().then(res => {
    count.value = res.result.count;
    friendList.value = res.result.list;
  });
};

onMounted(() => {
  getFriendsList();
});
</script>

<template>
  <div class="article">
    <!-- 首页图片 -->
    <PageBack video="/2023/12/16/yi-lei-na.mp4"></PageBack>
    <!-- 封面 -->
    <div class="friends-head myCenter">
      <h1 style="color: var(--blue);z-index: 10;font-weight: 700;font-size: 45px">友人帐</h1>
    </div>
    <!-- 友人列表 -->
    <div class="friends-wrap">
      <el-card style="padding: 20px" class="friends-box box-shadow">
        <div @click="clickLetter" class="form-wrap">
          <img class="before-img" src="@/assets/img/friends/before.png" style="width: 100%" alt=""/>
          <!-- 信 -->
          <div class="envelope" style="animation: hideToShow 2s">
            <div class="form-main">
              <img src="@/assets/img/friends/img.png" style="width: 100%" alt=""/>
              <div>
                <h3 style="text-align: center; height: 50px;line-height: 50px">有朋自远方来</h3>
                <div>
                  <div class="form-friends myCenter">
                    <div class="user-title">
                      <div>名称：</div>
                      <div>网址：</div>
                      <div>头像：</div>
                      <div>简介：</div>
                      <div>封面：</div>
                    </div>
                    <div class="user-content">
                      <div>
                        <el-input maxlength="30" v-model="friends.title"></el-input>
                      </div>
                      <div>
                        <el-input maxlength="120" v-model="friends.url"></el-input>
                      </div>
                      <div>
                        <el-input maxlength="200" v-model="friends.avatar"></el-input>
                      </div>
                      <div>
                        <el-input maxlength="200" v-model="friends.info"></el-input>
                      </div>
                      <div>
                        <el-input maxlength="200" v-model="friends.cover"></el-input>
                      </div>
                    </div>
                  </div>
                  <div class="myCenter" style="margin-top: 20px">
                    <proButton :info="'提交'"
                               @click.native.stop="submitFriend"
                               :before="constant.before_color_2"
                               :after="constant.after_color_2">
                    </proButton>
                  </div>
                </div>
                <div>
                  <img src="@/assets/img/friends/link.png" style="width: 100%;margin: 5px auto" alt=""/>
                  <p style="font-size: 12px;text-align: center;color: #999;padding-bottom: 10px">欢迎交换友链</p>
                </div>
              </div>
            </div>
          </div>
          <img class="after-img" src="@/assets/img/friends/after.png" style="width: 100%" alt=""/>
        </div>
        <div style="font-size: 20px;font-weight: bold;margin-top: 40px">🌸本站信息</div>
        <div>
          <blockquote>
            <div>网站名称: 青姝</div>
            <div>网址: https://coisink.com</div>
            <div>头像: https://coisink.com/qing-shu/static/img/user/avatar.png</div>
            <div>描述: 这是一个 摸魚、Vue3 与 Django Ninja 结合的产物～</div>
            <div>网站封面: https://coisink.com/assets/img/home/home.jpg</div>
          </blockquote>
        </div>
        <div style="font-size: 20px;font-weight: bold">🌸申请方式</div>
        <div>
          <blockquote>
            <div>点击上方信封✨✨✨</div>
            <div>不会添加带有广告营销和没有实质性内容的友链🚫🚫🚫</div>
            <div>申请之前请将本网站添加为您的友链哦🎟️🎟️🎟️</div>
          </blockquote>
        </div>
        <hr>
        <div class="friends-list">
          <h2 style="margin-top: 60px">
            ♥️青出于蓝
            <span class="num"> {{ count }} 条</span>
            <span class="num">以下友链仅是时间排序，不分先后</span>
          </h2>
          <div class="list-links">
            <div class="item" v-for="item in friendList" :key="item.id">
              <a :href="item.url" target="_blank">
                <div class="avatar">
                  <img :src="item.avatar" alt=""/>
                </div>
                <div class="content">
                  <span class="name">{{ item.title }}</span>
                  <div class="info">{{ item.info }}</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="less">
.article {
  width: 100%;
  height: 100%;

  .friends-head {
    position: relative;
    height: 300px;
  }

  .friends-wrap {
    margin: 0 auto 50px;
    width: 1230px;

    .friends-box {
      height: 100%;
      background: var(--background2);

      .form-wrap {
        position: relative;
        top: 0;
        cursor: pointer;
        margin: 0 auto;
        overflow: hidden;
        width: 530px;
        height: 447px;
        transition: all 1s ease-in-out .3s;
        z-index: 0;

        .before-img {
          position: absolute;
          left: 0;
          bottom: 126px;
          width: 530px;
          height: 317px;
          background-repeat: no-repeat;
          z-index: -100;
        }

        .envelope {
          position: relative;
          margin: 0 auto;
          padding: 200px 20px 20px;
          transition: all 1s ease-in-out .3s;

          .form-main {
            margin: 0 auto;
            overflow: hidden;
            background: var(--white);
            border-radius: 10px;

            .form-friends {
              margin-top: 12px;
              padding: 20px 0;
              background-color: #eee;
              border: #ddd 1px solid;

              .user-title {
                text-align: right;
                user-select: none;

                div {
                  height: 55px;
                  line-height: 55px;
                  text-align: center;
                }
              }

              .user-content {
                text-align: left;

                & > div {
                  height: 55px;
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
        }

        .after-img {
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 530px;
          height: 259px;
          background-repeat: no-repeat;
          z-index: 100;
        }
      }

      .friends-list {
        .num {
          position: relative;
          top: -1px;
          margin-left: 5px;
          padding: 0 5px;
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          color: #909399;
          display: inline-block;
          border-radius: 3px;
          background: var(--friend-tip-color);
        }

        .list-links {
          margin-top: 20px;
          margin-bottom: 30px;
          border-radius: 10px;
          display: grid;
          gap: 15px;

          .item {
            position: relative;
            border-radius: 10px;
            background-color: #8fbca275;

            &:before {
              content: "";
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              background: var(--theme-color);
              transition-timing-function: ease-out;
              transition-duration: .35s;
              transition-property: transform;
              transform: scale(0);
              border-radius: 10px;
            }

            &:hover {
              box-shadow: 2px 2px 10px 5px #49b0f563;
              transition: all 0.2s;

              &::before {
                transform: scale(1);
              }

              .avatar {
                width: 0;
              }

              .content .info,
              .name {
                color: #fff !important;
              }
            }

            a {
              position: relative;
              text-decoration: none;
              display: flex;
              align-items: center;

              .content {
                width: 100%;
                margin-left: 15px;

                .info,
                .name {
                  min-width: 60%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                }

                .name {
                  position: relative;
                  font-weight: 700;
                  color: var(--article-color);
                  padding-bottom: 5px;
                  margin-bottom: 10px;

                  &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 50%;
                    height: 2px;
                    background-color: var(--text-color);
                  }
                }

                .info {
                  color: var(--text-color);
                }
              }
            }
          }
        }
      }
    }

    blockquote {
      margin: 20px auto;
      padding: 10px 1rem;
      line-height: 2;
      color: var(--maxGreyFont);
      background-color: #ffe6fa;
      border-radius: 4px;
      border-left: 0.2rem solid #ed6ea0;
    }

    hr {
      position: relative;
      margin: 40px auto;
      border: 2px dashed var(--lightGreen);
      overflow: visible;
    }
  }
}

@media screen and (max-width: 700px) {
  .form-wrap {
    width: auto;
  }

  .before-img {
    width: auto;
  }

  .after-img {
    width: auto;
  }
}

@media screen and (max-width: 500px) {
  .friends-main {
    padding: 40px 15px;
  }

  .friends-wrap {
    padding: 0 10px
  }
}

@media screen and (max-width: 1118px) {
  .list-links {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);

    .avatar {
      display: none;
    }

    a {
      width: 100%;
      height: auto;
      padding: 5px;
    }
  }
}

@media screen and (min-width: 1119px) {
  .list-links {
    margin-left: 30px;
    grid-template-columns: repeat(4, 1fr);

    .avatar {
      height: 50px;
      width: 50px;
      margin: 0 10px;
      transition: width .35s !important;

      img {
        margin-right: 8px;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        object-fit: cover;
        vertical-align: middle;
        transition: transform .35s;
      }
    }

    a {
      width: 85%;
      height: 118px;
    }
  }
}
</style>